<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入打包后的 js文件-->
<!--<script src="../build/built.js"></script>-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <div>
        12346789
        <div class="box">less的样式处理</div>
    </div>
<span>
    css的样式处理
</span>
    <div id="img1"></div>
    <div id="img2"></div>
    <div id="img3"></div>
    <hr>
    <!--    <img src="[object module]" style="width: 100px;height: 100px" alt="">   配置 esModule: false-->
    <img src="./assets/angular.jpg" style="width: 100px;height: 100px" alt="">
    <img src="./assets/react.png" style="width: 100px;height: 100px" alt="">
    <hr>

    <h1>hello lazy loading</h1>
    <button id="btn">异步懒加载测试</button>

    <script type="module" >
        import {jian,cheng} from "./js/test.js"; //  这里直接用浏览器打开能看导进来的东西,但打包之后找不到对应路径,
        // console.log("hello")
        // console.log(jian)
    </script>

    </body>
</html>

<!--
        //如何导入已经暴露的文件？
        //1. 通用的导入(m1 m2 m3)方式
        //m1是自定义的临时模块名(导入的js文件内容被存到了这里)
        /*引入 m1.js 模块内容
        import * as m1 from "./src/js/m1.js";
        //引入 m2.js 模块内容
        import * as m2 from "./src/js/m2.js";
        //引入 m3.js
        import * as m3 from "./src/js/m3.js";
        */

        //2. 导入m1 m2 m3 方式二解构赋值形式
        /*
         import {school, teach} from "./src/js/m1.js";可以直接使用school teach了

         import {school as guigu, findJob} from "./src/js/m2.js";  使用别名guigu
         默认暴露:
         import {default as m3} from "./src/js/m3.js";
         */

        //3. 简便形式  仅针对默认暴露(同一个模块中不允许存在多个)
-->